<template>
  <div class="cart-header">
    <!-- 左侧标题和LOGO -->
    <div class="header-left">
      <div class="logo-container">
        <!-- <img src="../../assets/logo.png" alt="淘宝" class="logo-img" /> -->
      </div>
      <h1 class="site-title">购物车</h1>
    </div>
    
    <!-- 右侧搜索区域 -->
    <div class="header-right">
      <div class="search-container">
        <div class="search-input-wrapper">
          <input 
            type="text" 
            class="search-input" 
            placeholder="高中生ins小众书包" 
            v-model="searchKeyword"
            @keyup.enter="handleSearch"
          />
          <div class="camera-icon" @click="handleImageSearch">
            <el-icon><Camera /></el-icon>
          </div>
        </div>
        <button class="search-btn" @click="handleSearch">
          搜淘宝
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Camera } from '@element-plus/icons-vue'
import router from '../../router'

const searchKeyword = ref('')

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      name: 'SearchResults',
      query: { keyword: searchKeyword.value }
    })
  }
}


const handleImageSearch = () => {
  console.log('图片搜索功能')
  // 这里可以实现图片搜索功能
}
</script>

<style scoped lang="scss">
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #fff;
  margin-bottom: 0.25rem;
}

.header-left {
  display: flex;
  align-items: center;
  
  .logo-container {
    margin-right: 0.5rem;
    
    .logo-img {
      height: 1.75rem;
      width: auto;
    }
  }
  
  .site-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: #ff6a00; // 改为 #ff6a00
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  }
}

.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  
  .search-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 32rem;
    width: 100%;
    
    .search-input-wrapper {
      position: relative;
      flex: 1;
      
      .search-input {
        width: 100%;
        height: 1.75rem;
        padding: 0 2.25rem 0 0.5rem;
        border: 1px solid #ff6a00; // 改为 #ff6a00
        border-radius: 0.25rem;
        font-size: 0.8125rem;
        outline: none;
        transition: border-color 0.2s ease;
        
        &:focus {
          border-color: #ff6a00;
          box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.1);
        }
        
        &::placeholder {
          color: #999;
        }
      }
      
      .camera-icon {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        cursor: pointer;
        transition: color 0.2s ease;
        
        &:hover {
          color: #ff6a00; // 改为 #ff6a00
        }
        
        .el-icon {
          font-size: 1rem;
        }
      }
    }
    
    .search-btn {
      height: 1.75rem;
      padding: 0 0.75rem;
      background: #ff6a00; // 改为 #ff6a00
      color: #fff;
      border: none;
      border-radius: 0.25rem;
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
      
      &:hover {
        background: #ff8c00;
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(255, 106, 0, 0.3);
      }
      
      &:active {
        background: #e67e00;
        transform: translateY(0);
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 64rem) {
  .cart-header {
    border-radius: 0.25rem;
  }
}

@media (max-width: 48rem) {
  .cart-header {
    padding: 0.5rem 0.75rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .header-left .site-title {
    font-size: 1.125rem;
  }
  
  .header-right .search-container {
    flex-direction: column;
    width: 100%;
    
    .search-btn {
      width: 100%;
    }
  }
}
</style>
